<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/denlu.css">
    <link rel="shortcut icon" href="./favicon.ico" />

</head>

<body>
    <header>
        <img src="./images/l.jpg" alt="">
        <ul class="banxin wnqcf">
            <li><a href="./index.html">联想首页</a></li>
            <li><a href="lianbiao.html">商城</a></li>
            <li><a href="gouwuche.html">购物车</a></li>
            <li><a href="lianbiao.html">服务</a></li>
            <li><a href="lianbiao.html">会员</a></li>
            <li><a href="lianbiao.html">社区</a></li>
            <li><a href="lianbiao.html">门店</a></li>
            <li><a href="lianbiao.html">品牌</a></li>
            <li><a href="" style="color: red;">下载app</a> </li>
            <li style="float: right;">
                <div class="headr_right .wnqcf">
                    <img src="./images/小手机.png" alt="">

                </div>
            </li>
        </ul>
    </header>
        <div class="box">
            <div class="zhuti banxin">
                <form action="">
                    <div class="denlu">
                        <div class="biaoyu">会员登录</div>
                        <input type="text" name="username" class="username" placeholder="输入账号">
                        <input type="password" name="password" placeholder="密码由8-20位字母、数字和符号组合" class="password">
                        <button type="button" class="btn">立即登录</button>
                        <a href="zhuche.html" class="denlu">没有账号，点此注册></a>
                    </div>
                </form>
            </div>
        </div>
    

    <script src="./js/jquery.js"></script>
    <script src="./node_modules/layui-layer/dist/layer.js"></script>
    <!-- <script src="./js/cookie.js"></script> -->
    <script src="./js/tools.js"></script>
    <script>
        var button = document.querySelector('button')
        var username = document.querySelector('.username')
        var password = document.querySelector('.password')

        button.onclick = function () {
            // 验证用户名
            console.log(1);
            var reg = /^[a-zA-Z0-9]{5,10}$/;
            if (!reg.test(username.value)) {
                alert('用户名不符合规则')
                return false
            }
            // 验证密码：是否同时包含数字字母，6~16位
            // 是否同时包含了种
            if (!/[0-9]{5,15}/.test(password.value) || !/[a-zA-Z]+/.test(password.value)) {
                alert("密码不符合规范")
                return false;
            }

            $(this).prop('disabled', 'true')
            // 加载弹出层
            var loadindex = layer.load(1, {
                shade: [0.3, '#000']
            })
            $.post('./php/denlu.php',$('form').serialize(),res=>{
                layer.close(loadindex)
                var { meta: { status, msg } } = res;
                if (status === 1) {
                   
                     // 存储登录成功的cookie
                    tool.setCookie('username',$('[name="username"]').val(),7200)
                    
                    layer.msg(msg, {
                        icon: 1,
                        time: 1000
                    }, function () {
                        // 监测本地存储有没有url
                       
                        var url = localStorage.getItem('url')
                        if(url){
                            localStorage.removeItem('url')
                            location.href = url
                            return false
                        } 
                        location.href = "./index.html"
                    })

                }  else {
                    $(this).prop('disabled', false)
                    layer.msg(msg, {
                        icon: 2,
                        time: 1000
                    })
                }
            }, 'json')
        }
       
    </script>
</body>

</html>